<template>
  <el-card shadow="never">
    <h3>持续审计整体定位以及专题审计内容</h3>
    <div class="box">
      <ul>
        <li @click="handleClick(0)">数据资产管理</li>
        <li @click="handleClick(1)">集团持续审计专题管理</li>
        <li @click="handleClick(2)">模型预研功能</li>
        <li class="center">
          <i class="el-icon-top"></i>
          <span>整体定位及专题审计</span>
          <i class="el-icon-bottom"></i>
        </li>
        <li @click="handleClick(3)">专项审计支撑管理</li>
        <li @click="handleClick(4)">IT公司审计门户<br />及模型展示</li>
        <li @click="handleClick(5)">审计功能管理</li>
      </ul>
    </div>

    <el-dialog title="企业" :visible.sync="dialog" width="60%">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="columnA" label="企业名称"> </el-table-column>
        <el-table-column prop="columnB" label="初始合作时间"> </el-table-column>
        <el-table-column prop="columnC" label="操作">
          <template>
            <el-link @click="dialogA = true">查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="dialog = false">确 定</el-button>
      </span>

      <el-dialog
        title="企业详情审计"
        :visible.sync="dialogA"
        width="60%"
        append-to-body
      >
        <el-form label-width="130px">
          <el-form-item label="企业名称">
            <el-input value="飞腾信息技术"></el-input>
          </el-form-item>
          <el-form-item label="企业编码">
            <el-input value="A032123"></el-input>
          </el-form-item>
          <el-form-item label="审计项总量">
            <el-input value="56"></el-input>
          </el-form-item>
          <el-form-item label="通过审计数">
            <el-input value="49"></el-input>
          </el-form-item>
          <el-form-item label="重点审计项目1">
            <el-input value="全网5G使用"></el-input>
          </el-form-item>
          <el-form-item label="重点审计项目2">
            <el-input value="视讯业务"></el-input>
          </el-form-item>
          <el-form-item label="重点审计项目3">
            <el-input value="集团彩铃"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer">
          <el-button @click="dialogA = false">取 消</el-button>
          <el-button type="primary" @click="dialogA = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
      dialogA: false,
      tableData: [
        {
          columnA: '飞鹰信息技术有限公司',
          columnB: '2016'
        },
        {
          columnA: '艾普汇科技有限公司',
          columnB: '2018'
        },
        {
          columnA: '迪迪科技有限公司',
          columnB: '2018'
        },
        {
          columnA: '蓝天信息技术有限公司',
          columnB: '2015'
        },
        {
          columnA: '普气信息技术有限公司',
          columnB: '2020'
        }
      ]
    }
  },

  methods: {
    whichRouter(val) {
      switch (val) {
        case 0:
          return '/sjzc/sjpz'
        case 1:
          return '/llgl/fxtb'
        case 2:
          return '/zbgl/fxsj'
        case 3:
          return '/khxs/cxzs'
        case 4:
          return '/zhqx/sjzt'
        case 5:
          return '/sjbg/'
        default:
          break
      }
      return '/404'
    },
    handleClick(val) {
      this.$router.push(this.whichRouter(val))
      this.$bus.$emit('tabchange', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  ul {
    width: 700px;
    height: 700px;
    position: relative;
    margin: auto;
    padding: 0;
    li {
      line-height: 1.5;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #ffffff;
      width: 200px;
      height: 180px;
      clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 4.5;
      i {
        font-size: 22px;
      }
    }
    li:nth-child(1) {
      position: absolute;
      left: 198px;
      top: 260px;
      transform: translate(-50%, -50%);
      background-color: #c5e0b4;
    }
    li:nth-child(2) {
      position: absolute;
      left: 350px;
      top: 168px;
      transform: translate(-50%, -50%);
      background-color: #ffe699;
    }
    li:nth-child(3) {
      position: absolute;
      left: 502px;
      top: 260px;
      transform: translate(-50%, -50%);
      background-color: #b4c7e7;
    }
    li:nth-child(4) {
      position: absolute;
      left: 350px;
      top: 350px;
      transform: translate(-50%, -50%);
      background-color: #2f5597;
    }
    li:nth-child(5) {
      position: absolute;
      left: 198px;
      top: 442px;
      transform: translate(-50%, -50%);
      background-color: #9dc3e6;
    }
    li:nth-child(6) {
      position: absolute;
      left: 350px;
      top: 532px;
      transform: translate(-50%, -50%);
      background-color: #f4b183;
    }
    li:nth-child(7) {
      position: absolute;
      left: 502px;
      top: 442px;
      transform: translate(-50%, -50%);
      background-color: #548235;
    }
  }
}
</style>
